<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><head>
<meta charset='utf-8'>
<title> - 实时监测</title>
<link th:href="@{/profile/imgs/favicon.ico}" rel="shortcut icon"/>
<link rel='stylesheet' href='/css1/style.css'>
<script type='text/javascript' src='/libs/echarts.min.js'></script>
<script type='text/javascript' src='/libs/jquery-3.6.0.min.js'></script>
<script type='text/javascript' src='/libs/canvas_alarm.js'></script>
<script type='text/javascript' src='/libs/canvas_meter.js'></script>
<script type='text/javascript' src='/libs/canvas_realtime.js'></script>
<script type='text/javascript' src='/libs/socket.js'></script>
<script type='text/javascript' src='/libs/reconnecting-websocket.js'></script>
<script type='text/javascript' src='/libs/layui/layui.js'></script>
<script type='text/javascript' src='/libs/charts_ld.js'></script>
<script type='text/javascript' src='/libs/utils.js'></script>
<script type='text/javascript' src='/libs/music.js'></script>
</head>
<style>
html, body {
	width: 100%;
	height: 100%;
}

.canvasWrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60%;
	min-height: 100%;
	height: auto;
}
</style>
<body>
	<div class='head clearfix'>
		<h1 class='pulll_left'>
			<a onclick="relocate('/')">[[${name}]]</a>
		</h1>
		<div class='menu menu2 pulll_left'>
			<ul>
				<!-- <li><a th:href="@{/realtime/index}">综合展示</a></li> -->
				<li><a onclick="setlocate('/realtime/washow','')">衡器监控</a></li>
				<li><a onclick="setlocate('/realtime/wacharts','')">实时曲线</a></li>
				<li><a onclick="setlocate('/realtime/wachartshis','')">历史曲线</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waalarmlist','')">告警列表</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waWorkOrderList')">工单列表</a></li>
			</ul>
		</div>
		<div class='time' id='showTime'>1970/01/01 00:00:00</div>
	</div>
	<div class='mainbox'>
		<ul class='clearfix nav1'>
			<li style='width: 22%'>
				<div class='box'>
					<div class='tit'>衡器信息</div>
					<div class='boxnav'>
						<table class='table1' width='100%' border='0' cellspacing='0'
							cellpadding='0'>
							<tbody>
								<tr>
									<th>名称</th>
									<th>类型</th>
									<th>型号</th>
									<th>状态</th>
								</tr>
								<tr>
									<td><a th:text='${waMap.waname }'
										th:href="@{/realtime/waState(waCode=${waMap.wacode})}"></a></td>
									<td><span th:text='${null==waMap?"":waMap.type }'
										class='text-b'></span></td>
									<td><span th:text='${null==waMap?"":waMap.model }'
										class='text-w'></span></td>
									<td>
										<span th:if="${alarmNum>0}" class="text-d">异常([[${alarmNum}]])</span>
										<span th:if="${alarmNum==0}" class="text-s">正常</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class='box' style="height: 357px;">
					<div>
						<div style="float: left;" class='tit'>告警列表</div>
						<div style="text-align: right;" class='tit'>
							<img id="musicImg" height="17px" src="" onclick="setAlarmMusicFlag()"></img>
							<a onclick="relocate('/index?t=/realtime/waalarmlist','')">>></a>
						</div>
					</div>
					<div class='boxnav'>
						<table id="alarmTable" class='table1' width='100%' border='0'
							cellspacing='0' cellpadding='0'>
							<tr>
								<th>要素</th>
								<th>报警值</th>
								<th>描述</th>
								<th>时间</th>
							</tr>
							<tbody id="alarmTableBody">
							</tbody>
						</table>
					</div>
				</div>
			</li>
			<li style='width: 56%'>
				<div class='box' style='height: 492px'>
					<div class="mapnav" style="width: 220px; padding-left: 10px;">
						<ul>
							<li><div>
									<span style="color: #FFF; width: 220px;" id="dataTime">数据时间:</span>
								</div></li>
						</ul>
					</div>
					<div class='canvasWrap' id='wrap'>
						<canvas id='draw'></canvas>
					</div>
					<div class='canvasWrap' id='wrap1'>
						<canvas id='draw1'></canvas>
					</div>
				</div>
			</li>
			<li style='width: 22%'>
				<div class='box' style="height: 200px;">
					<div class='tit'>重量监测</div>
					<div class='boxnav'>
						<table class='table1' width='100%' border='0' cellspacing='0'
							cellpadding='0'>
							<tbody>
								<tr style="height: 70px;" th:each='config,stat:${waconfigList}'
									th:if='${config.show_type==4}'>
									<td width="150px;"><span style="font-size: 28px"
										th:attr="id=${'ZL'+stat.index}" th:text='${config.title }'
										class='text-b'></span></td>
									<td><span style="font-size: 28px"
										th:attr="id=${'ZLValue'+config.sort_no}"></span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class='box' style="height: 280px;">
					<div class='tit'>环境监测</div>
					<div class='boxnav'>
						<table class='table2' width='100%' border='0' cellspacing='0'
							cellpadding='0'>
							<tbody>
								<tr>
									<td align="center" style="height: 220px" th:each='config,stat:${waconfigList}'
										th:if='${config.show_type==3}'>
										<div th:attr="id=${'meterChart'+stat.index}"
											style='height: 120px; width: 120px;'></div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</li>
		</ul>
		<div class='box' style='padding: 20px 0;'>
			<div id='chartLdDiv' style='height: 290px;'></div>
		</div>
		<div id="div1"></div>
	</div>
	<script th:inline='javascript'>
	document.title = [[${name}]] + document.title;
  var host = [[${#httpServletRequest.getHeader("Host")}]]

  var realtimeJsonData = '{}'
  var alarmJsonData = '{}'
  var wsUri = 'ws://' + host+'/womp_wa/'

  var waMap = [[${waMap}]]
  if(!waMap){
	  alert("未找到衡器信息，请检查配置信息")
  }
  var waconfigList = [[${waconfigList}]]
  var waconfigColorList = [[${waconfigColorList}]]
  
  var imgUrl = waMap.d3_annex//图片路径
  var realtimeCanvas = new CanvasRealtime('wrap', 'draw', imgUrl)
  realtimeCanvas.loadImage()
  var alarmCanvas = new CanvasAlarm('wrap1', 'draw1', '/profile/imgs/bg_empty.png')
  alarmCanvas.loadImage()

  var dynamicChart = new DynamicChart('chartLdDiv');
  dynamicChart.initDynamicChart(waMap.index_chart_element_name+'实时曲线',waMap.index_chart_element,waMap.index_chart_element_num);
  dynamicChart.setClick({"title":"衡器数据","path":'/realtime/wacharts?waCode=' + waMap.wacode,"width":1200,"height":600});

	if(waMap.alarm_music=='Y'){
		$('#musicImg').attr('src','/profile/imgs/music-open.png');
	}else{
		$('#musicImg').attr('src','/profile/imgs/music-close.png');
	}
	
  function onMessage(evt) {
    var jsonData = JSON.parse(evt.data)
    $("#dataTime").text("数据时间："+jsonData.message.time)
    // 实况数据(数据)
    if (jsonData.type == 1) {
      realtimeJsonData = jsonData
      realtimeCanvas.drawImg()
      //alarmCanvas.drawImg()
      realtimeCanvas.drawPoint()
    }
    // 仪表报警数据
    else if (jsonData.type == 2) {
      alarmJsonData = jsonData
      alarmCanvas.drawImg()
      alarmCanvas.drawPoint()
      alertAlarm()
    }
    // 修改参数报警数据
    else if (jsonData.type == 3) {
      alarmJsonData = jsonData
      alarmCanvas.drawImg()
      alarmCanvas.drawPoint()
    }
  }

  var chartArr=[]
  for(var i=0;i<waconfigList.length;i++){
    if(waconfigList[i].show_type==3){
    	var meter = new Meter('meterChart' + i)
    	chartArr.push(meter)
    }
  }
  
  function alertAlarm(){
	  var layer;
	  layui.use('layer', function(){
		  layer = layui.layer; 
		  layer.open({
			  title:'系统提示',
			  area: ['300px', '120px'],
			  skin: 'layui-layer-lan',
			  time: 3000,
			  shade: 0,
			  tipsMore: true,
			  anim: 2,
			  offset: 'rb',
			  type: 1, 
			  content: '<span style="color:red;padding:20px;">发生告警，请到告警列表处理</span>'
			});
	  })
	  if(waMap.alarm_music=='Y'){
		  playSound('/music/alarm.mp3')
	  }
  }
  
	function setAlarmMusicFlag(){
		var musicFlag=waMap.alarm_music;
		if(musicFlag=='N'){
			musicFlag='Y';
			$('#musicImg').attr('src','/profile/imgs/music-open.png');
		}else{
			musicFlag='N';
			$('#musicImg').attr('src','/profile/imgs/music-close.png');
		}
		waMap.alarm_music=musicFlag;
		  
		$.post("/realtime/alarm/setAlarmMusicFlag?waCode="+waMap.wacode+"&musicFlag="+musicFlag);
	}
  
  initSocket(wsUri + waMap.wacode)
</script>
</body>
</html>
